<template>
	<div>
		<el-tree :data="arr" :props="defaultProps" accordion @node-click="handleNodeClick">
		</el-tree>
	</div>
</template>

<script>
import GetVideo from '@/api/GetVideo'
// 引入获取主课程接口
import getClassifyr from '@/api/getclassifyr'

export default {
	name: 'Aside',
	data() {
		return {
			videoName: '',
			arr: [],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			pk: ''
		}
	},
	methods: {
		// 渲染树状图
		getChapter() {
			// 将一级标题赋值给data中VideoName
			this.videoName = this.$store.state.pk
			// 调用标题接口
			getClassifyr.course(this.$store.state.token).then((res) => {
				if (res.data.status == 'success') {
					this.videoName = res.data.data  // 将数据存储在 data中的videoName
					let array = []
					// 循环videoName 在label中使用一级标题,子元素 标识id
					this.videoName.forEach(item => {
						let obj = {
							label: item.name,
							id: item.id,
							children: [
								{
									label: 'asda'
								}
							]
						}
						array.push(obj)
					})
					this.arr = array
				}
			})
		},
		// 点击树状图 显示 子选项
		handleNodeClick(data) {
			this.pk = data.id // 当前点击pk

			if (data.children.length == 0 || data.children[0].label != 'asda') {
				return
			}
			// 调用章节接口（传参）
			GetVideo.getChapter(this.$store.state.token, this.pk).then(res => {
				if (res.data.status == 'success') {
					let arr = [];
					res.data.data.forEach(item => {
						let obj = {
							id: item.id,
							label: item.name
						}
						arr.push(obj);
					})
					data.children = arr;
				}
			})
		}
	},
	mounted() {
		// 首次加载获取树状图数据
		this.getChapter()
	}
}
</script>

<style></style>